<template>
  <div>
    <el-date-picker
      v-model="date"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      style="margin: 20px 10% 0;"
      @change="dateChange"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
    <el-table
      :data="advanceList"
      style="width: 80%;margin: 20px auto;"
      border
    >
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="date"
        label="时间"
      >
      </el-table-column>
      <el-table-column
        prop="money"
        label="预支款"
      >
      </el-table-column>
      <el-table-column
        prop="remark"
        label="描述"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="openEditAdvance(scope.row)"
          >
            编 辑
          </el-button>
          <el-button
            type="danger"
            @click="openDeleteAdvance(scope.row)"
          >
            删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="删除预支记录"
      :visible="deleteAdvanceVisible"
      :show-close="false"
      width="40%"
    >
      <span>你确定删除 <span style="color: red;">{{ advanceInfo.name }}</span> 的这条借款为 <span style="color: red;">{{ advanceInfo.money }}</span> 记录吗？</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="deleteAdvanceVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="deleteAdvance"
        >提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑"
      :visible="editAdvanceVisible"
      :show-close="false"
      width="40%"
    >
      <el-form
        :model="advanceInfo"
        label-width="80px"
      >
        <el-form-item label="姓名">
          <el-input
            v-model="advanceInfo.name"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="advanceInfo.money"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="advanceInfo.remark"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editAdvanceVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editAdvance"
        >提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { api_getSalary, api_deleteSalary, api_updateSalary } from '@/api'
export default {
  data() {
    return {
      advanceList: [],
      deleteAdvanceVisible: false,
      editAdvanceVisible: false,
      advanceInfo: {},
      date: [],
      pickerOptions: {
        disabledDate(time) {
          const today = new Date(); // 获取当前日期
          return time.getTime() > today.getTime(); // 将结束日期大于当前日期的日期禁用
        }
      }
    }
  },
  methods: {
    dateChange() {
      api_getSalary(null,{
        start: this.formDate[0],
        end: this.formDate[1]
      }).then(res => {
        if (res.status == 200) {
          this.advanceList = res.data
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    openDeleteAdvance(data) {
      this.deleteAdvanceVisible = true
      this.advanceInfo = data
    },
    deleteAdvance() {
      api_deleteSalary(this.advanceInfo).then(res => {
        if (res.status == 200) {
          this.deleteAdvanceVisible = false
          api_getSalary(null,{
            start: this.formDate[0],
            end: this.formDate[1]
          }).then(res => {
            this.advanceList = res.data
          })
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    openEditAdvance(data) {
      console.log(data)
      this.editAdvanceVisible = true
      this.advanceInfo = data
    },
    editAdvance() {
      api_updateSalary(this.advanceInfo).then(res => {
        if (res.status == 200) {
          this.editAdvanceVisible = false
          api_getSalary(null,{
            start: this.formDate[0],
            end: this.formDate[1]
          }).then(res => {
            this.advanceList = res.data
          })
          this.$message({
            type: 'success',
            message: '修改成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: '修改成功'
          })
        }
      })
    }
  },
  computed: {
    formDate() {
      let arr = []
      if (this.date[0] && this.date[1]) {
        arr[0] = `${this.date[0].getFullYear()}-${this.date[0].getMonth()+1}-${this.date[0].getDate()}`
        arr[1] = `${this.date[1].getFullYear()}-${this.date[1].getMonth()+1}-${this.date[1].getDate()}`
      }
      return arr
    }
  },
  mounted() {
    // api_getSalary().then(res => {
    //   if (res.status == 200) {
    //     this.advanceList = res.data
    //   }
    // })
    //date设置为当天
    let today = new Date()
    this.date = [today, today]
    this.dateChange()
  }
}
</script>

<style>
</style>
